import getComponentRootDom from "./getComponentRootDom";
import Icon from "@/components/Icon";
import styles from "./showMessage.module.less";

/**
 * 弹出消息
 * @param {*} content  消息内容
 * @param {*} type 消息类型
 * @param {*} duration 多久后消失
 * @param {*} container 容器，该消息加入到那个容器正中，不传，默认为整个页面的中央
 */

export default function ({content='', type='info', duration=1000, container,callback}) {
    const div = document.createElement('div'); //创建元素

    //获取图标元素
    const icon = getComponentRootDom(Icon, {
        type,
        size: 20
    })

    //设置元素内容
    div.innerHTML = `
    <span class=${styles.icon}>${icon.outerHTML}</span>
    <div>${content}</div>`;

    //设置样式
    div.className = `${styles.message} ${styles['message-' + type]}`;

    //将元素添加到容器中
    container = container ? container : document.body;
    if (getComputedStyle(container).position == 'static') {
        container.style.position = 'relative';
    }
    container.appendChild(div);

    //浏览器强制渲染
    div.offsetHeight;

    //回归到正常位置
    div.style.opacity = 1;
    div.style.transform = `translate(-50%,-50%)`;

    //等待一段时间消失
    setTimeout(() => {
        div.style.opacity = 0;
        div.style.transform = `translate(-50%,-50%) translateY(-25px)`;
        //清除元素
        div.addEventListener('transitionend', function () {
            this.remove();
            callback&&callback();
        },{once:true})
    }, duration)



}
